<script>
	export default {
		props: {
			icon: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: ''
			},
			url: {
				type: String,
				default: ''
			},
			webview: {
				type: String,
				default: 'zWebView'
			}
		},
		methods: {
			go() {
				uni.navigateTo({
					url: this.$props.url,
					webview: this.webview
				})
			}
		}
	}
</script>

<template>
	<div class="item flex-col center" style="width: 25%;" @click="go">
		<div class="icon w-70 h-70 center" :class="bgColor" center rounded-13>
			<image :src="icon" mode="aspectFit" class="w-50 h-50"></image>
		</div>
		<div class="fz24 text-gray-333 mt-18" style="color: #333333;">
			{{ title }}
		</div>
	</div>
</template>

<style>
	.bg-orange {
		background-color: #FFF8F3 !important;
	}

	.bg-blue {
		background-color: #F3F9FF !important;
	}

	.bg-green {
		background-color: #F3FFF3 !important;
	}

	.bg-yellow {
		background-color: #FFFCF3 !important;
	}
</style>